<template>
	<view class="coupon">
		<view class="header">
			<image src="https://kelai.huazhuangpin168.cn/static/images/c_bg.png" class="bg_img"></image>

			<view class="header_view">
				<view class="iconfont icon-ic_left back" @click="back"></view>

				<view class="tips_box">
					<view class="tips_view">
						<image src="https://kelai.huazhuangpin168.cn/static/images/c_bg3.png" class="c_bg3"></image>
						<view class="tips">先领券再买书更优惠~</view>
					</view>
					<image src="https://kelai.huazhuangpin168.cn/static/images/c_bg1.png" class="icon"></image>
				</view>
			</view>

		</view>

		<scroll-view scroll-y class="scroll_list">
			<view class="content">

				<view class="list" v-if="platform.coupons.length">
					<view class="title">
						<image :src="platform.image" class="avatar"></image>
						<view class="name">{{platform.name}}</view>
						<view class="iconfont icon-ic_rightarrow fs-24 text--w111-666"></view>
					</view>

					<scroll-view scroll-x class="scroll_view">
						<view class="scroll_box">
							<view class="item" v-for="(dataItem,dataIndex) in platform.coupons" :key="dataIndex">
								<view class="item_view">
									<view class="price">
										<view class="unit">￥</view>
										<view class="value">{{dataItem.coupon_price}}</view>
									</view>
									<view class="other">
										<view class="key">满{{dataItem.use_min_price}}可用</view>
										<view class="value" @click="submit(dataItem.id)">点击领取</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>


				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="title" @click="router(`/pages/book/storeDeta?id=${item.store_id}`)">
						<image :src="item.image" class="avatar"></image>
						<view class="name">{{item.name}}</view>
						<view class="iconfont icon-ic_rightarrow fs-24 text--w111-666"></view>
					</view>

					<scroll-view scroll-x class="scroll_view">
						<view class="scroll_box">
							<view class="item" v-for="(dataItem,dataIndex) in item.coupons" :key="dataIndex">
								<view class="item_view">
									<view class="price">
										<view class="unit">￥</view>
										<view class="value">{{dataItem.coupon_price}}</view>
									</view>
									<view class="other">
										<view class="key">满{{dataItem.use_min_price}}可用</view>

										<view class="value" v-if="dataItem.is_use">已领取</view>
										<view class="value" v-else-if="dataItem.is_use==2">已领完</view>
										<view class="value active" @click="submit(dataItem.id)" v-else>点击领取</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getCouponsList,
		setCouponReceive
	} from '@/api/api.js';
	export default {
		data() {
			return {
				platform: {},
				list: []
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				getCouponsList().then(res => {
					let data = res.data;
					let platform = data.platform;
					let list = data.stores;
					this.platform = platform;
					this.list = list;
				})
			},
			submit(id) {
				setCouponReceive(id).then((res) => {
					this.$util.Tips({
						title: '领取成功'
					});
					this.getList();
				}).catch(error => {
					return this.$util.Tips({
						title: error
					});
				})
			},
			router(url) {
				uni.navigateTo({
					url
				})
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.coupon {
		background: #F6F6F6;

		.header {
			width: 100vw;
			height: 346rpx;
			// padding: calc(var(--status-bar-height) + 24rpx) 28rpx 0;
			// box-sizing: border-box;
			position: relative;

			.bg_img {
				width: 100%;
				height: 556rpx;
				position: absolute;
				left: 0;
				top: 0;
			}

			.header_view {
				width: 100vw;
				padding: calc(var(--status-bar-height) + 52rpx) 28rpx 0;
				box-sizing: border-box;
				position: relative;
				z-index: 2;

				.back {
					color: #333333;
				}

				.tips_box {
					width: 100%;
					padding: 30rpx 24rpx 0 36rpx;
					box-sizing: border-box;
					display: flex;
					// align-items: center;
					justify-content: space-between;

					.tips_view {
						.c_bg3 {
							width: 256rpx;
							height: 90rpx;
						}

						.tips {
							line-height: 1;
							font-size: 28rpx;
							color: #777777;
						}
					}

					.icon {
						width: 114rpx;
						height: 140rpx;
					}
				}
			}


		}

		.scroll_list {
			height: calc(100vh - var(--window-top) - 346rpx);
		}

		.content {
			width: 100vw;
			padding: 0 32rpx;
			box-sizing: border-box;

			.list {
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.avatar {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						margin-right: 12rpx;
					}

					.name {
						flex: 1;
					}
				}

				.scroll_view {
					margin-top: 10rpx;
					white-space: nowrap;

					.scroll_box {
						height: 150rpx;

						.item {
							display: inline-block;
							// width: 360rpx;
							// height: 150rpx;
							border-radius: 16rpx;
							padding: 10rpx;
							box-sizing: border-box;
							background: linear-gradient(180deg, #FA6E42 0%, #EA0606 100%);
							margin-right: 12rpx;
							position: relative;
							overflow: hidden;

							&::after {
								width: 32rpx;
								height: 32rpx;
								border-radius: 50%;
								content: "";
								background: linear-gradient(180deg, #FA6E42 0%, #EA0606 100%);
								position: absolute;
								left: -10rpx;
								top: 50%;
								transform: translateY(-50%);
							}

							&::before {
								width: 32rpx;
								height: 32rpx;
								border-radius: 50%;
								content: "";
								background: linear-gradient(180deg, #FA6E42 0%, #EA0606 100%);
								position: absolute;
								right: -10rpx;
								top: 50%;
								transform: translateY(-50%);
							}


							&:last-child {
								margin-right: 0;
							}

							.item_view {
								min-width: 340rpx;
								height: 130rpx;
								padding: 0 20rpx;
								box-sizing: border-box;
								background: linear-gradient(180deg, #FFFEFE 0%, #F9EAD6 100%);
								border-radius: 12rpx 12rpx 12rpx;
								display: flex;

								.price {
									// width: 50%;
									padding-right: 20rpx;
									display: flex;
									align-items: baseline;
									position: relative;

									&::after {
										content: "";
										height: 60rpx;
										border-right: 2rpx solid #FFA184;
										position: absolute;
										top: 50%;
										right: 0rpx;
										z-index: 2;
										transform: translateY(-50%);
									}


									.unit {
										font-size: 30rpx;
										color: #F8251A;
									}

									.value {
										font-weight: 500;
										font-size: 80rpx;
										color: #F8251A;
									}
								}

								.other {
									display: flex;
									flex-direction: column;
									align-items: center;
									justify-content: center;
									padding-left: 20rpx;

									.key {
										height: 36rpx;
										line-height: 36rpx;
										font-size: 20rpx;
										color: #F8251A;
									}

									.value {
										width: 136rpx;
										height: 44rpx;
										line-height: 44rpx;
										text-align: center;
										font-size: 22rpx;
										color: #F8251A;
										background: linear-gradient(135deg, #F1B371 0%, #FFEBD1 100%);
										border-radius: 23rpx 23rpx 23rpx 23rpx;

										&.active {
											font-size: 22rpx;
											color: #F8251A;
											background: linear-gradient(135deg, #F1B371 0%, #FFEBD1 100%);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>